<template>
  <view class="custom-table">
    <view class="table-row header-row">
      <view class="table-cell">{{ title }}</view>
      <view class="table-cell">{{ credibilityLabel }}</view>
    </view>

    <!-- 展示数据行 -->
    <view class="table-row" v-for="(levelEntry, index) in results" :key="index">
      <view class="table-cell">{{ levelEntry.level }}</view>
      <view class="table-cell">{{ levelEntry[valueField] }}</view>
    </view>
  </view>
</template>

<script setup>
// 定义组件的props
const props = defineProps({
  // 表格标题（如：Anther Emergence 或 Seed Setting）
  title: {
    type: String,
    default: 'Result'
  },
  // 可信度标签（如：Credibility）
  credibilityLabel: {
    type: String,
    default: 'Credibility'
  },
  // 结果数据数组
  results: {
    type: Array,
    default: () => []
  },
  // 数据字段名（project3使用percentage，project4使用value）
  valueField: {
    type: String,
    default: 'percentage'
  },
  // 是否显示百分号
  showPercentage: {
    type: Boolean,
    default: true
  }
});
</script>

<style lang="less" scoped>
.custom-table {
  height: 170rpx; // 总高度与图片一致
  border: 1rpx solid #000;
  border-radius: 10rpx;
  overflow: hidden;
  font-size: 20rpx;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 5rpx 0;

  .table-row {
    display: flex;
    border-bottom: 1rpx solid #000;
    padding: 0;
    flex: 1;
    margin: 0;

    &:last-child {
      border-bottom: none;
    }

    .table-cell {
      flex: 1;
      text-align: center;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1rpx solid #000;
      height: 100%;

      &:last-child {
        border-right: none;
      }
    }
  }

  // 表头样式
  .header-row {
    padding: 0;
    margin: 0;
    background-color: #4CAF50;
    color: #fff;
    font-weight: bold;
  }
}
</style>